<template>
    <div class="search-frame">
      <div class="model">
        <div class="searchData" v-for="items in searchData" :key="items.id">
          <div class="item-box" v-for="item in items" :key="item.id">
            <div class="goods-item">
              <div class="item-img">
                <img :src="searchDataImg(item)" :alt="searchDataTitle(item)" @load="searchImgLoad">
              </div>
              <div class="goods-item-footer">
                <div class="title">
                  {{ searchDataTitle(item) }}
                </div>
                <div class="goods-item-price">
                  <div id="price">
                    <span>￥{{ searchDataPrice(item) }}</span>
                  </div>
                  <div class="collect"><span class="star"></span>{{collectNum(item)}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-tip" :style="{top:searchTipBottomD}" v-show="!this.searchRequestNextPage">
          <span v-if="this.searchDistinguish">正在加载更多...</span>
          <span v-else>没有更多内容了哟~</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {mapState, mapActions} from "vuex"
  
  import {SearchFiledContent} from "@/request/api";
  
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "search",
    data() {
      return {
        searchFiledCache: {
          searchFiled: null,
          page: 1,
        },
        searchData: [],
        searchRequestNextPage: true,
        searchPageHeight: null,
        searchPageLastPage: null,
        searchShowNone: false,
      }
    },
    created() {
      this.searchCreatedFun()
      this.$store.dispatch("commonFooterShow",true)
    },
    methods: {
      searchCreatedFun() {
        const searchFild = this.$route.params.searchFiled
        this.searchFiledCache.searchFiled = searchFild
        const res = SearchFiledContent(searchFild, this.searchFiledCache.page)
        res.then(res => {
          const itemNum = Object.keys(res).length
          const container = []
          for (var i = 0; i < itemNum - 1; i++) {
            container.push(res[i])
          }
          this.searchData.push(container)
          this.searchPageLastPage = res.total_page
        })
      },
      searchGetData() {
        const res = SearchFiledContent(this.searchFiledCache.searchFiled, this.searchFiledCache.page)
        res.then(res => {
          const itemNum = Object.keys(res).length
          const container = []
          for (var i = 0; i < itemNum - 1; i++) {
            container.push(res[i])
          }
          this.searchData.push(container)
        })
      },
      searchDataImg(item) {
        return item['_source']['data']['result']['skuInfo']['img'] + "_640x854.v1cAC.40.webp"
      },
      searchDataTitle(item) {
        return item['_source']['data']['result']['itemInfo']['title']
      },
      searchDataPrice(item) {
        return item['_source']['data']['result']['itemInfo']['lowPrice']
      },
      searchImgLoad(){
        this.commonSearchFooterBarD
      },
      collectNum(item){
        return item['_source']['data']['result']['itemInfo']['cFav']
      },
      searchScroll() {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.$store.dispatch('index_footer_height', this.searchPageHeight - 100)
        this.searchPageHeight = document.body.scrollHeight
        if (this.scrollTop >= this.searchPageHeight - 400 && this.searchRequestNextPage && this.searchFiledCache.page < this.searchPageLastPage) {
          this.searchFiledCache.page += 1;
          this.searchGetData()
          this.$store.dispatch('commonFooterShow', false)
          this.searchRequestNextPage = false
        }
      },
      ...mapActions(['commonFooterB'])
    },
    computed: {
      searchTipBottomD() {
        if(this.searchPageHeight<200){
          return this.searchPageHeight +200+ 'px'
        }
        return this.searchPageHeight + 20 + 'px'
      },
  
      searchDistinguish() {
        this.searchShowNone = this.searchFiledCache.page < this.searchPageLastPage
        if (!this.searchShowNone) {
          this.searchRequestNextPage = false
        }
        return this.searchShowNone
      },
      commonSearchFooterBarD() {
        this.commonFooterB(this.searchPageHeight + 60)
      },
      ...mapState(['searchFiled'])
    },
    mounted() {
      document.addEventListener("scroll", this.searchScroll)
    },
    unmounted() {
      document.removeEventListener("scroll", this.searchScroll)
    },
  
    watch: {
      searchFiled(newFiled, oldFiled) {
        this.searchData = []
        this.searchFiledCache.searchFiled = newFiled
        this.searchFiledCache.page = 1
        this.searchGetData()
      },
      searchPageHeight(newNum, oldNum) {
        this.searchRequestNextPage = true
        this.commonSearchFooterBarD
        this.$store.dispatch('commonFooterShow', true)
        if (!this.searchDistinguish) {
          this.searchRequestNextPage = false
        }
      }
    },
  }
  </script>
  
  <style scoped>
  .model, .searchData {
    /*background-color: var(--mogujie-color);*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
  }
  
  .model img {
    width: 220px;
    height: auto;
    vertical-align: middle;
  }
  
  .item-box {
    float: left;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
    cursor: pointer;
  }
  
  .item-box:hover {
    transform: translateY(-8px);
    box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.2);
  }
  
  .item-box .item-img {
    width: 220px;
    height: 293.56px;
  }
  
  .goods-item-footer {
    position: relative;
    width: 220px;
    height: 75px;
    background-color: white;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 14px;
  }
  
  .goods-item-footer .title {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    height: 40px;
  }
  
  .goods-item-footer p {
    display: inline-block;
    font-size: 14px;
  }
  
  .goods-item-price {
    bottom: 0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 5px;
    padding: 0 5px;
  }
  
  #price {
    font-weight: 400;
    font-size: 16px;
    color: var(--mogujie-color);
  }
  
  #price span {
    font-weight: 800;
  }
  
  .bottom-tip {
    position: absolute;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .collect{
    font-size: 14px;
    color: rgba(0,0,0,0.5);
  }
  .collect .star{
    background-image: url("");
    background-size: 100%;
    background-color:red;
    width: 14px;
    height: 14px;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 2px;
  }
  </style>